doctype html
html(lang='en')

    head

        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1, shrink-to-fit=no')
        meta(name='description', content='')
        meta(name='author', content='')

        title Modern Business - Start Bootstrap Template

        // Favicon
        link(rel='icon', type='image/x-icon', href='assets/favicon.ico')

        include includes/css.pug

    body.d-flex.flex-column.h-100

        main.flex-shrink-0

            // Navigation
            include includes/navbar.pug

            // Page Content
            section.py-5
                .container.px-5.my-5
                    .text-center.mb-5
                        h1.fw-bolder Frequently Asked Questions
                        p.lead.fw-normal.text-muted.mb-0 How can we help you?
                    .row.gx-5
                        .col-xl-8
                            // FAQ Accordion 1
                            h2.fw-bolder.mb-3 Account &amp; Billing
                            #accordionExample.accordion.mb-5
                                .accordion-item
                                    h3#headingOne.accordion-header
                                        button.accordion-button(type='button' data-bs-toggle='collapse' data-bs-target='#collapseOne' aria-expanded='true' aria-controls='collapseOne')
                                            | Accordion Item #1
                                    #collapseOne.accordion-collapse.collapse.show(aria-labelledby='headingOne' data-bs-parent='#accordionExample')
                                        .accordion-body
                                            strong This is the first item's accordion body.
                                            |  It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the 
                                            code .accordion-body
                                            | , though the transition does limit overflow.
                                .accordion-item
                                    h3#headingTwo.accordion-header
                                        button.accordion-button.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseTwo' aria-expanded='false' aria-controls='collapseTwo')
                                            | Accordion Item #2
                                    #collapseTwo.accordion-collapse.collapse(aria-labelledby='headingTwo' data-bs-parent='#accordionExample')
                                        .accordion-body
                                            strong This is the second item's accordion body.
                                            |  It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the 
                                            code .accordion-body
                                            | , though the transition does limit overflow.
                                .accordion-item
                                    h3#headingThree.accordion-header
                                        button.accordion-button.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseThree' aria-expanded='false' aria-controls='collapseThree')
                                            | Accordion Item #3
                                    #collapseThree.accordion-collapse.collapse(aria-labelledby='headingThree' data-bs-parent='#accordionExample')
                                        .accordion-body
                                            strong This is the third item's accordion body.
                                            |  It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the 
                                            code .accordion-body
                                            | , though the transition does limit overflow.

                            // FAQ Accordion 2
                            h2.fw-bolder.mb-3 Website Issues
                            #accordionExample2.accordion.mb-5.mb-xl-0
                                .accordion-item
                                    h3#headingOne.accordion-header
                                        button.accordion-button(type='button' data-bs-toggle='collapse' data-bs-target='#collapseOne2' aria-expanded='true' aria-controls='collapseOne2')
                                            | Accordion Item #1
                                    #collapseOne2.accordion-collapse.collapse.show(aria-labelledby='headingOne' data-bs-parent='#accordionExample2')
                                        .accordion-body
                                            strong This is the first item's accordion body.
                                            |  It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the 
                                            code .accordion-body
                                            | , though the transition does limit overflow.
                                .accordion-item
                                    h3#headingTwo.accordion-header
                                        button.accordion-button.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseTwo2' aria-expanded='false' aria-controls='collapseTwo2')
                                            | Accordion Item #2
                                    #collapseTwo2.accordion-collapse.collapse(aria-labelledby='headingTwo' data-bs-parent='#accordionExample2')
                                        .accordion-body
                                            strong This is the second item's accordion body.
                                            |  It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the 
                                            code .accordion-body
                                            | , though the transition does limit overflow.
                                .accordion-item
                                    h3#headingThree.accordion-header
                                        button.accordion-button.collapsed(type='button' data-bs-toggle='collapse' data-bs-target='#collapseThree2' aria-expanded='false' aria-controls='collapseThree2')
                                            | Accordion Item #3
                                    #collapseThree2.accordion-collapse.collapse(aria-labelledby='headingThree' data-bs-parent='#accordionExample2')
                                        .accordion-body
                                            strong This is the third item's accordion body.
                                            |  It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the 
                                            code .accordion-body
                                            | , though the transition does limit overflow.
                        .col-xl-4
                            .card.border-0.bg-light.mt-xl-5
                                .card-body.p-4.py-lg-5
                                    .d-flex.align-items-center.justify-content-center
                                        .text-center
                                            .h6.fw-bolder Have more questions?
                                            p.text-muted.mb-4
                                                | Contact us at
                                                br
                                                a(href='#!') support@domain.com
                                            .h6.fw-bolder Follow us
                                            a.fs-5.px-2.link-dark(href='#!')
                                                i.bi-twitter
                                            a.fs-5.px-2.link-dark(href='#!')
                                                i.bi-facebook
                                            a.fs-5.px-2.link-dark(href='#!')
                                                i.bi-linkedin
                                            a.fs-5.px-2.link-dark(href='#!')
                                                i.bi-youtube

        // Footer
        include includes/footer.pug

        include includes/scripts.pug